<template>
    <div style="width: 100%;height: 100%; ">
        <div style="height: 600px; width: 75%;">
            <div class="carousel" ref="wheel" id="carousel">
                <el-carousel trigger="click" height="600px" width="100%" indicator-position="none">
                    <el-carousel-item v-for="item in imgList" :key="item">
                        <img :src="item.src" alt="图片丢失了" :title="item.title" class="car-img">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="index-main">
            <div class="show">
                <div class="title">
                    <el-row>
                        <el-col :span="4">
                            <span class="h3">热门</span>
                        </el-col>
                        <el-col :span="4" :offset="16">
                            <el-button size="large" @click="getHot">
                                <el-icon>
                                    <Refresh/>
                                </el-icon>
                                刷新一下
                            </el-button>
                        </el-col>
                    </el-row>
                </div>

                <div style="display: flex;flex-direction: row">
                    <div class="hot" v-for="item in hotItems.data">
                        <h4>{{ item.product?.name }}</h4>
                        <div>{{ item.itemid }}</div>
                        <img :src="item.product?.descn" :alt="item.product?.name">
                        <el-button type="success" plain
                                   @click="router.push(`/categories/${item.product?.category}/${item.productid}`)"
                                   size="large"
                                   class="button"
                        >
                            了解更多
                        </el-button>
                    </div>
                </div>
                <div class="title">
                    <el-row>
                        <el-col :span="4">
                            <span class="h3">你可能喜欢</span>
                        </el-col>
                        <el-col :span="4" :offset="16">
                            <el-button size="large" @click="getBanner">
                                <el-icon>
                                    <Refresh/>
                                </el-icon>
                                刷新一下
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <div style="display: flex;flex-direction: row">
                    <div class="hot" v-for="item in bannerProducts.data">
                        <h4>{{ item.name }}</h4>
                        <img :src="item.descn" :alt="item.name">
                        <el-button type="success" plain
                                   @click="router.push(`/categories/${item.category}/${item.productid}`)"
                                   size="large"
                                   class="button"
                        >
                            了解更多
                        </el-button>
                    </div>
                </div>
                <div>
                    <div style="margin-bottom: 50px">
                        <el-text type="info">想了解更多？</el-text>
                        <el-text type="info">点击下方按钮查看</el-text>
                    </div>
                    <el-button type="primary" plain style="height: 5vh;width: 15vw" @click="router.push('/categories')">
                        查看更多
                    </el-button>
                </div>
            </div>
        </div>
    </div>

</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from 'vue'
import router from "@/router";
import {get} from '@/assets/ts/ruquestMethod'
import type {ItemData, ProductData} from "@/assets/ts/Interfaces";
import {Refresh} from "@element-plus/icons-vue";


const loginName = sessionStorage.getItem('loginName')
let wheel = ref<any>(null)
const handleScroll = () => {
    let element = document.getElementById('carousel')
    if (element != null) {
        element.style.filter = `blur(${window.pageYOffset / 60}px)`
    }
}
window.addEventListener('scroll', handleScroll, true)
console.log(import.meta.url)
const getImageUrl = (name:string) => {
  return new URL(`/src/assets/image/categories/${name}`, import.meta.url).href
}
const imgList = [
    {
        name: 'cat',
        src: getImageUrl('cat1.jpg'),
        title: 'cat'
    },
    {
        name: 'dog',
        src: getImageUrl('dog2.jpg'),
        title: 'dog'
    },
    {
        name: 'fish',
        src: getImageUrl('fish1.jpg'),
        title: 'fish'
    },
    {
        name: 'bird',
        src: getImageUrl('bird.jpg'),
        title: 'bird'
    },
    {
        name: 'reptile',
        src: getImageUrl('reptile.jpg'),
        title: 'reptile'
    }
]

const hotItems = reactive<ItemData>({
    data: [{
        attr1: '',
        itemid: '',
        listprice: 0,
        product: null,
        productid: '',
        qty: 0,
        unitcost: 0
    }]
})
const bannerProducts = reactive<ProductData>({
    data: [{
        productid: '',
        category: '',
        name: '',
        descn: '',
        descnn: ''
    }]
})
const getHot = () => {
    get('/items/hot',
        (response: any) => {
            hotItems.data = response.data
        }
    )
}
const getBanner = () => {
    get(`banners?username=${loginName == null ? '' : loginName}`,
        (response: any) => {
            bannerProducts.data = response.data
            console.log(bannerProducts.data)
        }
    )
}
onBeforeMount(() => {
    getHot()
    getBanner()
})
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 540px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.carousel {
    position: fixed;
    width: 70%;
    margin-left: 15%;
    min-height: 540px;
    z-index: -1;
}

.car-img {
    width: 100%;
}

.show {
    padding-top: 20px;
    width: 70%;
    margin-left: 15%;
}

.h3 {
    font-weight: bold;
    margin-top: 0;
    margin-left: 10px;
    margin-right: 0;
    font-size: 30px;
}

.index-main {
    background-color: #F5F7FA;
    width: 100%;
    text-align: center;
    /* height: 100%; */
    z-index: 4;
    padding-bottom: 30px
}

.hot {
    min-height: 25vw;
    width: 25%;
    border-radius: 5px;
    margin-bottom: 50px;

}

.hot:hover {
    /* border: solid 1px gray; */
    box-shadow: var(--el-box-shadow);
    background-color: white;
    transition: 0.5s;
}

.hot img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
}

.hot h4 {
    padding-top: 5px;
}

.button {
    margin-top: 10px;
}
.title{
    margin-bottom: 10px;
}
</style>